<template>
  <div class="detail">
    <div class="message">
      <p>请填写你的身份信息</p>
      <span>
        通过后信息不可更改
      </span>
    </div>
    <van-form @submit="onSubmit">
      <van-field
        readonly
        clickable
        name="picker"
        :value="value"
        label="证件类型"
        placeholder="选择证件类型"
        @click="showPicker = true"
        label-width="100px"
        :rules="[{ required: true}]"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field
          v-model="name"
          name="姓名"
          label="姓名"
          placeholder="姓名"
          label-width="100px"
          :rules="detailRules.username"
        />
      <van-field
          v-model="idNum"
          type="password"
          name="身份证号"
          label="身份证号"
          placeholder="身份证号"
          label-width="100px"
          :rules="detailRules.cardId"
        />
      <van-field name="radio" label="性别" :rules="[{ required: true}]">
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
        <van-field
          v-model="userLicense"
          type="password"
          name="驾驶证档案编号"
          label="驾驶证档案编号"
          placeholder="驾驶证档案编号"
          label-width="100px"
          :rules="detailRules.userLicense"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
import { userDeatil } from '@/api/user'
export default {
  name: 'Detail',
  data () {
    return {
      idNum: '',
      userLicense: '',
      value: '',
      columns: ['身份证', '外籍护照', '港澳证'],
      showPicker: false,
      radio: '',
      name: '',
      detailRules: {
        cardId: [
          { required: true, message: '', trigger: 'onBlur' },
          { pattern: /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确格式的身份证号码' }
        ],
        userLicense: [
          { required: true, message: '', trigger: 'onBlur' },
          { pattern: /^[1-8]\d{11}$/, message: '请输入正确格式的驾驶证编号' }
        ],
        username: [
          { required: true, message: '', trigger: 'onBlur' },
          { pattern: /^[\u4e00-\u9fa5]{2,}(\.[\u4e00-\u9fa5]+)?$/, message: '请输入正确格式的姓名' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'isLogin',
      'userInfo'
    ])
  },
  created () {
    console.log(this.userInfo)
  },
  methods: {
    ...mapMutations([
      'setDetail'
    ]),
    async onSubmit () {
      const params = {
        idCard: this.idNum,
        userLicense: this.userLicense,
        cardType: this.value,
        sex: this.radio,
        name: this.name,
        userId: this.userInfo.userId
      }
      console.log(params)
      const { data: res } = await userDeatil(params)
      console.log(res)
      this.$notify({ type: 'success', message: '填写完成，页面即将跳转' })
      setTimeout(() => {
        this.$router.push('/home')
      }, 1000)
    },
    onConfirm (value) {
      this.value = value
      this.showPicker = false
    }
  }
}
</script>

<style scoped lang="scss">
.detail{
  padding: 20px;
  .message{
    p{
      font-size: 18px;
      font-weight: normal;
      color: #333;
    }
    span{
      color: #ccc;
    }
    margin-bottom: 10px;
  }
}
</style>
